<template>
    <div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>桥隧一体化管理平台</span>
            </div>
            <div class="header-time">
                <span>{{ nowTime }}</span>
            </div>
        </div>
        <div class="content">
            <div class="content-con">
                <LeftPart />
                <MapPart />
                <RightPart />
            </div>
        </div>
    </div>
</template>

<script>
import LeftPart from './Left.vue'
import MapPart from './Map.vue'
import RightPart from './Right.vue'
export default {
    name: 'MainPart',
    components: {
        LeftPart,
        MapPart,
        RightPart
    },
    props: {
    },
    data() {
        return {
            nowTime: ""
        }
    },
    mounted() {
        setInterval(() => {
            this.getTime()
        }, 1000);
    },
    methods: {
        fillZero(str) {
            var realNum;
            if (str < 10) {
                realNum = '0' + str;
            } else {
                realNum = str;
            }
            return realNum;
        },
        getTime() {
            var myDate = new Date();
            var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
            var myToday = myDate.getDate(); //获取当前日(1-31)
            var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var myHour = myDate.getHours(); //获取当前小时数(0-23)
            var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var nowTime = myYear + '年' + this.fillZero(myMonth) + '月' + this.fillZero(myToday) + '日' + '  ' + this.fillZero(myHour) +
                ':' + this.fillZero(myMinute) + ':' + this.fillZero(mySecond) + '  ' + week[myDay] + '  ';
            //console.log(nowTime);
            this.nowTime = nowTime;
        }
    },
}
</script>

<style>
.public-bg {
    background: rgba(12, 26, 63, 0.3);
}

.public-title {
    width: calc(100% - 20px);
    height: 30px;
    position: relative;
    top: 0;
    left: 5px;
    color: white;
    padding-left: 16px;
    line-height: 30px;
    font-size: 13px;
}

.public-title:before {
    width: 4px;
    height: 20px;
    top: 5px;
    position: absolute;
    content: "";
    background: #2997e4;
    border-radius: 2px;
    left: 5px;
}

.content-body {
    width: 100%;
    height: 100%;
    background: #0d325f;
    background-size: 100% 100%;
    position: absolute;
}

.header {
    height: 70px;
    width: 100%;
       /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
}

.header .header-left {
    width: 20%;
    /* float: left; */
    line-height: 70px;
    margin-left: 40%;
    /* border: 1px solid red; */
}

.header .header-left span {
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 2px;
    padding: 0 20px;
}

.header .header-time {
    width: 18%;
    line-height: 70px;
    /* float: right; */
    text-align: right;
    padding-right: 20px;
    /* border: 1px solid red; */
}

.header .header-time span {
    color: #ffffff;
}

.content {
    width: 100%;
    height: calc(100% - 75px);
    position: absolute;
}

.content .content-con {
    height: 100%;
}

.title-nav {
    width: 100%;
    height: calc(100% - 30px);
}
</style>
